<template>
  <div ref="box" style="height: 100%; width: 100%;">
    <!-- {{ props.src }} -->
    <img v-if="['png', 'jpg', 'pjeg'].includes(props.type)" :src="props.src" alt="">
    <vue3dLoader :key="showFiledKey" v-else :filePath="props.src"
      outputEncoding="sRGB" :height="boxHeight" :lights="lights"></vue3dLoader>
    <!-- <component style="height: 200px;" v-else :is="showTypeComponent[props.type]" :src="props.src" /> -->
  </div>
</template>

<script setup>
import { shallowRef, reactive,ref,onMounted,onUnmounted,nextTick  } from 'vue'
import { vue3dLoader } from "vue-3d-loader";
// import { ModelObj, ModelFbx, ModelGltf, ModelThree, ModelPly, ModelStl } from 'vue-3d-model';
const props = defineProps(['src', 'type'])
// const showTypeComponent = reactive(
//   {
//     "obj": shallowRef(ModelObj),
//     "fbx": shallowRef(ModelFbx),
//     "gltf": shallowRef(ModelGltf),
//     "json": shallowRef(ModelThree),
//     "ply": shallowRef(ModelPly),
//     "stl": shallowRef(ModelStl),
//   })
const showFiledKey = ref(new Date().getTime())
const lights = ref();
lights.value = [
  {
    type: "AmbientLight",
    color: "black",
  },
  {
    type: "DirectionalLight",
    position: { x: 100, y: 10, z: 100 },
    color: "#FFFFFF",
    intensity: 0.8,
  },
  {
    type: "PointLight",
    color: "#000000",
    position: { x: 200, y: -200, z: 100 },
    intensity: 1,
  },
  {
    type: "HemisphereLight",
    skyColor: "#000000",
    groundColor: "#000000",
    position: { x: 200, y: -200, z: 100 },
  },
];
const box = ref(null);
let boxHeight = ref(250);
const updateBoxHeight = () => {
  if (box.value) {
    nextTick(() => {
        // 执行需要的操作
        boxHeight.value = box.value.offsetHeight;
        // showFiledKey.value = new Date().getTime()
      });
    
   
  }
};
 
onMounted(() => {
  window.addEventListener('resize', updateBoxHeight);
  updateBoxHeight(); // 初始化获取高度
});
 

onUnmounted(() => {
  window.removeEventListener('resize', nextTick);
});
</script>

<style lang='less' scoped></style>